<template>
    <div id="app">
        <Header v-if="$route.meta.showH"></Header>
        <div class="container" :class="{'hasF':$route.meta.showF,'middle-box':$route.meta.showH}">
            <router-view/>
        </div>
        <Footer v-if="$route.meta.showF" :tabIndex="$route.meta.tabIndex"></Footer>
    </div>
</template>

<script>
    import Header from '@/components/header'
    import Footer from '@/components/footer'
    import $ from 'jquery'
    export default {
        components:{Header,Footer},
        name: 'App',
        data(){
          return{}
        },
        created() {

        }
    }
</script>

<style lang="less">
    @import "assets/iconfont/iconfont.css";
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: #f6f6f6;
    }
    .middle-box{
        padding-top: 90px;
    }
    .hasF{
        padding-bottom:104px ;
    }
    img{
        vertical-align: top;
    }
    input,button,textarea{
        border:0;
        outline: none;
    }
    input{
        background: transparent;
    }
    ul{
        list-style: none;
    }
    a{
        display: inline-block;
        text-decoration: none;
    }
    .flex{
        display: flex;
        align-items: center;
    }
    .flex-between{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .flex-around{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .flex-center{
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>
